<template>
	<div class="Body">
		<!-- <div class="addres-screen">
			<el-cascader 
			v-model="value"
			:props="{ value: 'regionId', label: 'regionName', checkStrictly: true}"
			:options="options" 
			collapse-tags
			clearable></el-cascader>
		</div> -->
		<div class="HouseBox">
			<div class="HousesCard">
				<el-card class="box-card" v-for="(item,index) in houseData" :key="index.houseId">
					<div class="img">
						<img :src="$store.state.imgShowRoad2 + '/file/' + item.housePicture.split(',')[0]" />
					</div>
					<div class="HouseInfo">
						<div class="njl-name">
							<div class="njl-price">￥{{item.housePrice}}</div>
							<a href="javascript:;" @click="skipHouseInfo(item.houseId)">
								【{{item.houseRregion.split(',')[0]}}——
								  <template v-if="item.houseRregion.split(',').length >= 2">
								    {{item.houseRregion.split(',')[1]}}】
								  </template>
								  <template v-else>
								    {{item.houseRregion.split(',')[2]}}】
								  </template>
								  <em style="font-style: normal;">{{item.houseName}}</em>
							</a>
						</div>
						<div class="introduce">
							{{item.description}}
						</div>
						<div class="addres"><em class="el-icon-s-promotion"></em>
						{{item.houseRregion.split(',')[0]}}
						  <template v-if="item.houseRregion.split(',').length>=2">
						    {{item.houseRregion.split(',')[1]}}
						  </template>
						  <template v-else>
						    {{item.houseRregion.split(',')[2]}}
						  </template>
						{{item.districtAddress}}
						</div>
					</div>
				</el-card>
			</div>
			<div class="Househot">
				<h1>热门</h1>
				<ul v-for="(item,index) in hotseData" :key="index" v-if="index < 10">
					<li><em></em>{{item.houseName}}</li>
				</ul>
			</div>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
	</div>
</template>

<script>
	import houseApi from "@/api/farmHouse.js"
	export default {
		data() {
			return {
				total: 0,
				pageSize: 10,
				currentPage: 1,
				houseData: [],
				hotseData: [],
				options: [],
				value:[]
			}
		},
		methods: {
			async SearchHot() {
				const res = await houseApi.SearchHomeAll("/znFarmhouse/SearchHomeAll");
				if (res.code == 200) {
					this.hotseData = res.data;
				}
			},
			async SearchHousePage() {
				const res = await houseApi.SearchHousePage("/znFarmhouse/SearchHousePage", {
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.houseData = res.data.records;
					this.total = res.data.total;
				}
			},
			async GetTree() {
				const res = await houseApi.GetTree("/sysRegion/RegionTree");
				if (res.code == 200) {
					this.options = res.data;
				}
			},
			skipHouseInfo(item) {
				this.$router.push({ path: `/HouseInfoPage/${item}` }).catch(err => err);
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.SearchHousePage();
			},
			
		},

		created() {
			this.SearchHot();
			this.SearchHousePage();
			this.GetTree();
		}
	}
</script>

<style lang="scss" scoped>
	.Body {
		margin: 0 20% 3% 20%;
		position: relative;

		.addres-screen {
			margin-top: 10px;
		}

		.HouseBox {
			display: flex;
		}

		.HousesCard {
			width: 75%;

			.box-card {
				margin: 20px;

				::v-deep .el-card__body {
					display: flex;
				}

				.img {
					width: 20%;
					aspect-ratio: auto 150 / 120;
					height: 120px;
					border: 1px solid #f3f3f3;
					padding: 3px;
					text-anchor: middle;
					border-radius: 4px;
					margin-right: 20px !important;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.HouseInfo {
					width: 78%;

					.njl-name {
						margin: 0 0 5px 0;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						.njl-price {
							width: auto;
							height: 35px;
							line-height: 25px;
							float: right;
							margin-right: 20px;
							font-size: 18px;
							font-weight: bold;
							color: #ff061a;
						}

						a {
							font-weight: bold !important;
							outline-style: none;
							outline-color: invert;
							outline-width: medium;
							text-decoration: none;
							font-size: 16px;
							color: #2e2e2e;
						}

						a:hover {
							color: #ff061a;
						}

					}

					.introduce {
						color: #666;
						font-size: 14px;
						display: -webkit-box;
						/* 将元素以弹性盒子方式显示 */
						-webkit-line-clamp: 3;
						/* 设置文本行数，超过三行将被截断 */
						-webkit-box-orient: vertical;
						/* 设置文本排列方向为垂直 */
						overflow: hidden;
						/* 超出隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号显示超出部分 */
					}

					.addres {
						margin-top: 30px;
						font-size: 12px;
						color: #999;
						margin-top: 5px;
						vertical-align: middle;
					}
				}
			}
		}

		.Househot {
			margin-top: 20px;
			width: 23%;
			height: 66vh;
			background-color: #e7e7e7;
			border-radius: 4px;

			h1 {
				margin: 30px 0 50px 10px;
				line-height: 0;
				font-size: 26px;
				color: #2c92f8;
			}

			ul {
				margin-left: 35px;
				list-style: none;
				/* 去除默认点样式 */
				padding-left: 0;
				font-size: 16px;

				li {
					margin-bottom: 30px;
				}
			}
		}

		.footer_page {

			.el-pagination {
				position: absolute;
				right: 40%;
				bottom: 0%;
				transform: translateY(100%);
			}
		}
	}
</style>